<template>
	<el-container>
		<el-aside width="200px" v-loading="showGrouploading">
			<el-container>
				<el-header>
					<el-input placeholder="输入关键字进行过滤" v-model="groupFilterText" clearable></el-input>
				</el-header>
				<el-main class="nopadding">
					<el-tree ref="netDiskDir" class="menu" node-key="netDiskId"
							 :data="netDiskList"
							 :props="groupsProps"
							 :current-node-key="''"
							 :highlight-current="true"
							 :expand-on-click-node="false"
							 :filter-node-method="groupFilterNode"
							 :load="loadNode"
							 lazy
							 @node-click="groupClick"
					>
						<template #default="{node, data}">
							<span class="custom-tree-node">
								<span class="label">{{ node.label }}</span>
								<span class="code">{{ data.code }}</span>
							</span>
						</template>

					</el-tree>
				</el-main>
			</el-container>
		</el-aside>
		<el-container style="overflow: hidden">
			<el-header>
				<div class="left-panel">
					<span style="font-weight: 600;font-size: 18px">{{ (folderName != '' ? '《' + folderName + '》' : '') }}</span>
				</div>
				<div class="right-panel">
					<el-button @click="goBack" :disabled="this.historyIndex==0" icon="el-icon-caret-left" title="后退"></el-button>
					<el-button @click="goNext" :disabled="this.historyIndex==this.historyRecord.length" icon="el-icon-caret-right" title="前进"></el-button>
				</div>
			</el-header>
			<el-container @contextmenu.prevent="openMenu('folderContextmenu',$event)">
				<el-card shadow="never" style="width:100%;height: 100%;overflow: auto;">
					<el-alert v-if="this.netDiskId==''" title="请选择目录查看文件" type="warning" style="margin-bottom:20px;"></el-alert>
					<el-col v-if="childFolderList.length==0&&fileList.length==0">
						<el-empty description="目录下没有文件" :image-size="100"></el-empty>
					</el-col>
					<el-row :gutter="15">
						<el-col style="padding: 10px;margin: 5px" :xl="3" :lg="3" :md="4" :sm="6" :xs="24" v-for="item in childFolderList" :key="item.netDiskId"
								@click="showFileInfo(item)"
								@dblclick="openFolder(item)"
								@contextmenu.prevent.stop="openMenu('folderOtherContextmenu',$event,item)" :title="item.fileName">
							<div style="text-align: center;">
								<el-icon style="font-size: 40px;">
									<el-icon-folder-opened/>
								</el-icon>
							</div>
							<div :title="item.netDiskName" style="text-align: center;font-size: 16px;font-weight: 600;text-overflow: ellipsis;width: 100%;overflow: hidden;white-space: nowrap;">
								{{ item.netDiskName }}
							</div>
						</el-col>
						<el-col style="padding: 10px;margin: 5px" :xl="3" :lg="3" :md="4" :sm="6" :xs="24" v-for="item in fileList" :key="item.netDiskId"
								@click="showFileInfo(item)"
								@contextmenu.prevent.stop="openMenu('fileContextmenu',$event,item)" @dblclick="preview(item)">
							<div style="text-align: center;">
								<el-icon style="font-size: 40px;" :title="(item.fileSize/(1024*1024)).toFixed(2)+`MB`">
									<component :is="getFileTypeIcon(item.extName)"/>
								</el-icon>
							</div>
							<div style="text-align: center;font-size: 16px;font-weight: 600;text-overflow: ellipsis;width: 100%;overflow: hidden;white-space: nowrap;">
								<span :title="item.fileName">{{ item.netDiskName }}</span>
							</div>
						</el-col>
					</el-row>
				</el-card>
			</el-container>
		</el-container>
		<el-aside>
			<el-container>
				<el-header style="text-align: center;font-size: 18px;font-weight: 600;display: unset;line-height: 30px">文档详情
				</el-header>
				<el-main style="background: white">
					<el-form-item label="文件名称:">
						{{ fileInfo.netDiskName }}
					</el-form-item>
					<el-form-item label="文件大小:" v-if="fileInfo.isFile!=='false'">
						{{ (fileInfo.fileSize / (1024 * 1024)).toFixed(2) + `MB` }}
					</el-form-item>
					<el-form-item label="文档格式:" v-if="fileInfo.isFile!=='false'">
						{{ fileInfo.extName }}
					</el-form-item>
					<el-form-item label="创建时间:">
						{{ fileInfo.createTime }}
					</el-form-item>
					<el-form-item label="修改时间:">
						{{ fileInfo.lastModifiedTime }}
					</el-form-item>
				</el-main>
			</el-container>
		</el-aside>
	</el-container>
	<sc-contextmenu ref="fileContextmenu" @command="handleCommand">
		<sc-contextmenu-item v-if="folderRole.manageRole" command="copy" title="复制" icon="el-icon-document-copy"></sc-contextmenu-item>
		<sc-contextmenu-item v-if="folderRole.manageRole" command="shear" title="剪切" icon="el-icon-scissor"></sc-contextmenu-item>
		<sc-contextmenu-item v-if="folderRole.manageRole" command="delete" title="删除" icon="el-icon-delete"></sc-contextmenu-item>
		<sc-contextmenu-item v-if="folderRole.manageRole" command="edit" title="编辑" icon="el-icon-edit"></sc-contextmenu-item>
		<sc-contextmenu-item v-if="folderRole.manageRole" command="rename" title="重命名" icon="el-icon-finished"></sc-contextmenu-item>
		<sc-contextmenu-item command="read" title="查看" icon="el-icon-search"></sc-contextmenu-item>
		<sc-contextmenu-item v-if="folderRole.downRole" command="down" title="下载" icon="el-icon-download"></sc-contextmenu-item>
		<sc-contextmenu-item command="preview" title="预览" icon="el-icon-view"></sc-contextmenu-item>
	</sc-contextmenu>

	<sc-contextmenu ref="folderOtherContextmenu" @command="handleCommand">
		<sc-contextmenu-item command="openFolder" title="打开" icon="el-icon-plus"></sc-contextmenu-item>
		<sc-contextmenu-item v-if="folderRole.manageRole" command="copyFolder" title="复制" icon="el-icon-document-copy"></sc-contextmenu-item>
		<sc-contextmenu-item v-if="folderRole.manageRole" command="shearFolder" title="剪切" icon="el-icon-scissor"></sc-contextmenu-item>
		<sc-contextmenu-item v-if="folderRole.manageRole" command="deleteFolder" title="删除" icon="el-icon-folder-checked"></sc-contextmenu-item>
		<sc-contextmenu-item v-if="folderRole.manageRole" command="renameFolder" title="重命名" icon="el-icon-finished"></sc-contextmenu-item>
	</sc-contextmenu>

	<sc-contextmenu ref="folderContextmenu" @command="handleCommand">
		<sc-contextmenu-item v-if="folderRole.createRole" command="createFile" title="新建文件" icon="el-icon-plus"></sc-contextmenu-item>
		<sc-contextmenu-item v-if="folderRole.createRole" command="createFolder" title="新建文件夹" icon="el-icon-edit"></sc-contextmenu-item>
		<sc-contextmenu-item v-if="folderRole.manageRole" command="paste" title="粘贴" icon="el-icon-folder-checked" :disabled="this.optId==''"></sc-contextmenu-item>
	</sc-contextmenu>
	<file-dialog v-if="dialog.save" :source-path="this.filePath" :net-disk-id="this.netDiskId" ref="fileDialog" @success="handleSaveSuccess" @closed="dialog.save=false"></file-dialog>
</template>
<script>
import iconSelect from "@/config/iconSelect"
import netDiskUtils from './netDiskUtils'
import attachNetDiskUtils from "@/utils/attachNetDiskUtils";
import scContextmenu from '@/components/scContextmenu'
import scContextmenuItem from '@/components/scContextmenu/item'
import fileDialog from "./fileDialog";
export default {
	name: 'Net Disk File Pc',
	mixins: [netDiskUtils, attachNetDiskUtils],
	components: {
		fileDialog,
		scContextmenu,
		scContextmenuItem,
	},
	data() {
		return {
			dialog: {
				save: false,
			},
			fileType: "",
			optType: "",
			optId: "",
			optFilePath:"",
			folderRole: {},
			childFolderList: [],
			historyRecord: [],
			historyIndex: 0,
			fileList: [],
			fileItem: {},
			fileInfo: {
				fileSize: 0,
			},
			netDiskId: '',
			folderName: '',
			filePath:'',
			showGrouploading: false,
			groupFilterText: '',
			netDiskList: [],
			groupsProps: {
				children:"children",
				label: "netDiskName",
				value: "netDiskId"
			},
			rules: {}
		}
	},
	watch: {
		groupFilterText(val) {
			this.$refs.netDiskDir.filter(val);
		},
	},
	mounted() {
		this.$nextTick(function () {
			//获取传递的参数
			this.netDiskId=this.$route.params.netDiskId!=null?this.$route.params.netDiskId:'';
			this.folderName=this.$route.params.folderName!=null?this.$route.params.folderName:'';
			this.filePath =this.$route.params.filePath!=null?this.$route.params.filePath:'';
			if(this.netDiskId!='')
			{
				this.groupClick({netDiskId:this.netDiskId,netDiskName:this.folderName,rootPath:this.filePath});
			}
		})
		this.getNetDiskDirGroup()
	},
	methods: {
		showFileInfo(item) {
			this.fileInfo = item;
		},
		loadNode(node, reslove) {
			let that = this;
			if (node.level === 0) {
				reslove(that.netDiskList);
			}
			if (node.level >= 1) {
				this.loadNodeChildren(node, reslove);
			}
		},
		// 树的懒加载获取子节点
		async loadNodeChildren(node, reslove) {
			let params = {
				netDiskId: node.data.netDiskId,
				filePath:node.data.rootPath
			};
			var res = await this.$API.file.netDisk.getNetDiskFolder.get(params);
			if (res.code === 200) {
				// 将得到的孩子列表，塞进树中
				this.$refs.netDiskDir.updateKeyChildren(node.data.netDiskId, res.data);
				return reslove(res.data);
			}
		},
		goBack() {
			if (this.historyIndex > 0) {
				this.historyIndex = this.historyIndex - 1;
				var item = this.historyRecord[this.historyIndex];
				this.netDiskId = item.sourceFolderId;
				this.folderName = item.sourceFolderName;
				this.filePath = item.sourceFilePath;
				this.getNetDiskFileList(item.sourceFilePath,item.sourceFolderId);
				this.getNetDiskRole(item.sourceFolderId);
			}
		},
		goNext() {
			if (this.historyIndex < this.historyRecord.length) {
				var item = this.historyRecord[this.historyIndex];
				this.historyIndex = this.historyIndex + 1;
				this.netDiskId = item.netDiskId;
				this.folderName = item.folderName;
				this.filePath = item.filePath;
				this.getNetDiskFileList(this.filePath,item.netDiskId);
				this.getNetDiskRole(item.netDiskId);
			}
		},
		//加载树数据
		async getNetDiskDirGroup() {
			this.showGrouploading = true;
			var res = await this.$API.file.netDisk.getMyNetDiskList.get();
			this.showGrouploading = false;
			this.netDiskList = res.data;
		},
		//树过滤
		groupFilterNode(value, data) {
			if (!value) return true;
			return data.folderName.indexOf(value) !== -1;
		},
		//树点击事件
		groupClick(data) {
			var flag=true;
			var sourceFolderId='';
			var sourceFolderName='';
			var sourceFilePath='';
			if(this.netDiskId=='')
			{
				flag=false;
			}else
			{
				sourceFolderId = this.netDiskId;
				sourceFolderName = this.folderName;
				sourceFilePath = this.filePath;
				this.historyIndex = this.historyIndex + 1;
			}
			this.netDiskId = data.netDiskId
			this.folderName = data.netDiskName;
			this.filePath = data.rootPath;
			if(flag)
			{
				this.historyRecord.push({sourceFolderId:sourceFolderId,sourceFolderName:sourceFolderName,sourceFilePath:sourceFilePath,filePath:this.filePath,netDiskId:this.netDiskId,folderName:this.folderName});
			}
			this.getNetDiskFileList(this.filePath,data.netDiskId);
			this.getNetDiskRole(data.netDiskId);
		},
		openFolder(item) {
			var sourceFolderId = this.netDiskId;
			var sourceFolderName = this.folderName;
			var sourceFilePath = this.filePath;
			this.historyIndex = this.historyIndex + 1;
			this.netDiskId = item.netDiskId;
			this.folderName = item.netDiskName;
			this.filePath = item.rootPath;
			this.fileItem = item;
			this.historyRecord.push({sourceFolderId:sourceFolderId,sourceFolderName:sourceFolderName,sourceFilePath:sourceFilePath,filePath:this.filePath,netDiskId:this.netDiskId,folderName:this.folderName});
			this.getNetDiskFileList(item.rootPath,item.netDiskId);
		},
		async handleCommand(command) {
			if (command == "createFile") {
				this.dialog.save = true
				this.$nextTick(() => {
					this.$refs.fileDialog.open()
				})
			} else if (command == "createFolder") {
				this.$prompt('请输文件夹新名称', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					inputErrorMessage: '新文件夹名称不能为空'
				}).then(({value}) => {
					if (!value) {
						this.$alert('新文件夹名称不能为空', "提示", {type: 'error'})
					} else {
						this.createFolder(this.netDiskId,this.filePath, value)
					}
				}).catch(() => {
				})
			} else if (command == "edit") {
				this.openFileOnLine(this.fileItem.extName, this.fileItem.netDiskId, 4,this.fileItem.rootPath);
			} else if (command == "read") {
				this.openFileOnLine(this.fileItem.extName, this.fileItem.netDiskId, 1,this.fileItem.rootPath);
			} else if (command == "shear") {
				this.fileType = "file";
				this.optType = "1";
				this.optFilePath=this.fileItem.rootPath;
				this.optId = this.fileItem.netDiskId;
				this.$message.success("剪切成功,请选择粘贴位置");
			} else if (command == "shearFolder") {
				this.fileType = "folder";
				this.optType = "1";
				this.optFilePath=this.fileItem.rootPath;
				this.optId = this.fileItem.netDiskId;
				this.$message.success("剪切成功,请选择粘贴位置");
			} else if (command == "copy") {
				this.fileType = "file";
				this.optFilePath=this.fileItem.rootPath;
				this.optType = "2";
				this.optId = this.fileItem.netDiskId;
				this.$message.success("拷贝成功,请选择粘贴位置");
			} else if (command == "copyFolder") {
				this.fileType = "folder";
				this.optFilePath=this.fileItem.rootPath;
				this.optType = "2";
				this.optId = this.fileItem.netDiskId;
				this.$message.success("拷贝成功,请选择粘贴位置");
			} else if (command == "paste") {
				this.paste(this.fileType, this.optType, this.optId);
			} else if (command == "delete") {
				this.$confirm(`确定删除选中的《` + this.fileItem.netDiskName + `》文件吗？`, '提示', {
					type: 'warning'
				}).then(async () => {
					const loading = this.$loading();
					this.delete(this.fileItem);
					loading.close();
				}).catch(() => {
				})
			} else if (command == "deleteFolder") {
				this.$confirm(`确定删除选中的《` + this.fileItem.netDiskName + `》目录吗？如果删除项中含有子集将会被一并删除`, '提示', {
					type: 'warning'
				}).then(async () => {
					const loading = this.$loading();
					this.deleteFolder(this.fileItem);
					loading.close();
				}).catch(() => {
				})
			} else if (command == "openFolder") {
				var sourceFolderId = this.netDiskId;
				var sourceFolderName = this.folderName;
				var sourceFilePath = this.filePath;
				this.historyIndex = this.historyIndex + 1;
				this.netDiskId = this.fileItem.netDiskId;
				this.folderName = this.fileItem.netDiskName;
				this.filePath = this.fileItem.rootPath;
				this.historyRecord.push({sourceFolderId:sourceFolderId,sourceFolderName:sourceFolderName,sourceFilePath:sourceFilePath,filePath:this.filePath,netDiskId:this.netDiskId,folderName:this.folderName});
				this.getNetDiskFileList(this.fileItem.rootPath,this.fileItem.netDiskId);
			} else if (command == "preview") {
				this.preview(this.fileItem)
			} else if (command == "down") {
				this.down(this.fileItem)
			} else if (command == "renameFolder") {
				this.$prompt('请输文件夹新名称', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					inputErrorMessage: '新文件夹名称不能为空'
				}).then(({value}) => {
					if (!value) {
						this.$alert('新文件夹名称不能为空', "提示", {type: 'error'})
					} else {
						this.renameFolder(this.fileItem, value)
					}
				}).catch(() => {
				})
			} else if (command == "rename") {
				this.$prompt('请输文件新名称', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					inputErrorMessage: '新文件名称不能为空'
				}).then(({value}) => {
					if (!value) {
						this.$alert('新文件名称不能为空', "提示", {type: 'error'})
					} else {
						this.rename(this.fileItem, value)
					}
				}).catch(() => {
				})
			}
		},
		openMenu(menu, e, item) {
			this.$refs.folderContextmenu.closeMenu();
			this.$refs.folderOtherContextmenu.closeMenu();
			this.$refs.fileContextmenu.closeMenu();
			this.fileItem = item;
			this.$refs[menu].openMenu(e);
		},
		async getNetDiskFileList(filePath,netDiskId) {
			var res = await this.$API.file.netDisk.getNetDiskFiles.get({netDiskId: netDiskId,filePath:filePath});
			if (res.code == 200) {
				var tempFolderList=[];
				var tempFileList=[];
				for(var i=0;i<res.data.length;i++)
				{
					if(res.data[i].isFile=="false")
					{
						tempFolderList.push(res.data[i]);
					}else if(res.data[i].isFile=="true")
					{
						tempFileList.push(res.data[i]);
					}
				}
				this.childFolderList = tempFolderList;
				this.fileList = tempFileList;
			} else {
				this.$alert(res.message, "提示", {type: 'error'})
			}
		},
		async getNetDiskRole(netDiskId) {
			var res = await this.$API.file.netDisk.getNetDiskRole.get({netDiskId: netDiskId});
			if (res.code == 200) {
				this.folderRole = res.data;
			} else {
				this.$alert(res.message, "提示", {type: 'error'})
			}
		},
		getFileTypeIcon(extName) {
			var iconName = "sc-icon-" + extName.substr(1, extName.length);
			if (iconSelect.icons[1].icons.indexOf(iconName) !== -1) {
				return iconName;
			} else {
				return 'sc-icon-unknown-file';
			}
		},
		handleSaveSuccess(data) {
			this.getNetDiskFileList(data.filePath,data.netDiskId);
		}
	}
}
</script>
<style scoped>
.custom-tree-node {
	/*display: flex;*/
	flex: 1;
	align-items: center;
	justify-content: space-between;
	font-size: 14px;
	padding-right: 24px;
	height: 100%;
}

.custom-tree-node .code {
	font-size: 12px;
	color: #999;
}

.custom-tree-node .do {
	margin-left: 10px;
	display: none;
}

.custom-tree-node:hover .code {
	display: none;
}

.custom-tree-node:hover .do {
	margin-left: 10px;
	display: inline-block;
}
</style>
